<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="100px"
        style="height:30px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="指令名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.command_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="指令ID">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.command_id"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item label="品名">
              <el-input placeholder="请输入内容" v-model="input" clearable>
              </el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="5">
            <el-form-item label="机构名称">
              <el-input placeholder="请输入内容" v-model="input" clearable>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="5">
            <el-form-item label="部门名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.department_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="指令类型">
              <el-select
                v-model="searchData.command_type"
                placeholder="请选择"
                style="width:100%;"
                clearable
              >
                <el-option
                  v-for="item in type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属策略名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属策略ID">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_id"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="margin:5px 20px 0 0">
            <el-button type="primary" size="mini" @click="search">
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
          <el-col :span="1" style="margin-top:5px">
            <el-button type="default" size="mini" @click="check">
              <d2-icon name="search" />
              查看
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        @row-click="handleSelectionChange"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="status" label="状态" sortable></el-table-column>
        <el-table-column
          prop="org_name"
          label="机构名称"
          sortable
          :formatter="orgFormat"
        ></el-table-column>
        <el-table-column
          prop="depart_name"
          label="部门名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="command_name"
          label="指令名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="command_id"
          label="指令ID"
          sortable
        ></el-table-column>
        <el-table-column
          prop="command_type"
          label="指令类型"
          sortable
        ></el-table-column>
        <el-table-column
          prop="command_trade_type"
          label="指令交易类型"
          sortable
          :formatter="typeFormatter"
        ></el-table-column>
        <el-table-column
          prop="strategy_name"
          label="所属策略名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_id"
          label="所属策略ID"
          sortable
        ></el-table-column>
        <el-table-column prop="start_date" label="指令开始日期" sortable>
          <template slot-scope="scope">{{
            scope.row.start_date | dateYMDHMSFormat
          }}</template></el-table-column
        >
        <el-table-column prop="end_date" label="指令结束日期" sortable>
          <template slot-scope="scope">{{
            scope.row.end_date | dateYMDHMSFormat
          }}</template></el-table-column
        >
        <el-table-column
          prop="creator_name"
          label="申请人"
          sortable
        ></el-table-column>
      </el-table>
    </el-card>
    <el-button
      type="primary"
      size="mini"
      style="float:right;margin-left: 10px;"
      @click="chose"
    >
      选择
    </el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <!-- 指令明细弹框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      :append-to-body="true"
      title="指令明细"
    >
      <order-deal
        :strategyInfo="multipleSelection"
        :closeValue="'check'"
        @closeMoule="closeMoule"
      ></order-deal>
    </el-dialog>
  </d2-container>
</template>

<script>
import orderDetail from "../model/orderDetail.vue";
import { futuresCommand } from "@/api/url_info.js";
export default {
  //选择指令
  name: "selectOrder",
  components: { "order-deal": orderDetail },
  data() {
    return {
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        command_name: "",
        command_id: "",
        command_type: "",
        strategy_id: "",
        strategy_name: "",
        match_type: "",
        creator: "",
        department_name: "",
        status: "456",
        command_trade_type: ""
      },
      type_options: [
        {
          value: 1,
          label: "普通指令"
        },
        {
          value: 2,
          label: "调整指令"
        },
        {
          value: 3,
          label: "移仓换月指令"
        }
      ],
      multipleSelection: {},
      dialogVisible: false,
      tableData: [],
      flag: ""
    };
  },
  created: function() {
    this.futuresCommands();
  },
  mounted() {
    this.$fallback();
  },
  methods: {
    //关闭当前页面
    closePage() {
      let allPage = this.$store.getters["d2admin/page/allPage"],
        currentPage = this.$store.getters["d2admin/page/currentPage"];
      for (var i in allPage) {
        var fullPath = allPage[i].fullPath;
        if (currentPage == fullPath) {
          allPage.splice(i, 1);
        }
      }
    },
    //类型格式化
    typeFormatter(row, column) {
      let type = row.command_trade_type;
      if (type === 1) {
        return "期货指令";
      } else {
        return "期权指令";
      }
    },
    listInfo() {
      console.log("获取传过来的参数", this.$route.query.state);
      this.flag = this.$route.query.state;
    },
    // 机构
    orgFormat(row, column) {
      return row.org_name == null ? row.depart_name : row.org_name;
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.futuresCommands();
    },
    //网格信息
    futuresCommands() {
      this.listInfo();
      if (this.flag == "instruct") {
        this.searchData.command_trade_type = "1";
      } else if (this.flag == "optionsCommand") {
        this.searchData.command_trade_type = "2";
      }
      futuresCommand(this.searchData).then(res => {
        this.tableData = [];
        let data = res.result.results;
        this.searchData.totalPage = res.result.count;
        for (let i = 0; i < data.length; i++) {
          this.tableData[i] = {
            command_id: data[i]["command_id"],
            depart_name: data[i]["depart_name"],
            org_name: data[i]["org_name"],
            creator_name: data[i]["creator_name"],
            strategy_id: data[i]["strategy_id"],
            status: data[i]["status"],
            command_type: data[i]["command_type"],
            command_name: data[i]["command_name"],
            start_date: data[i]["start_date"],
            end_date: data[i]["end_date"],
            strategy_name: data[i]["strategy_name"],
            command_trade_type: data[i]["command_trade_type"]
          };
        }
      });
    },
    //明细弹框
    check() {
      if (this.multipleSelection.command_id) {
        this.dialogVisible = true;
      } else {
        this.$message({
          message: "请先选择一条信息",
          type: "warning"
        });
      }
    },
    //指令明细弹框
    closeMoule() {
      this.dialogVisible = false;
    },
    //选择
    chose() {
      let that = this;
      let datas = that.multipleSelection;
      if (datas.command_id) {
        if (that.flag == "instruct") {
          that.$router.push({
            name: "instruct",
            params: { editList: datas }
          });
        } else if (that.flag == "optionsCommand") {
          that.$router.push({
            name: "optionsCommand",
            params: { editList: datas }
          });
        }
        this.closePage();
      } else {
        that.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.futuresCommands();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.futuresCommands();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px !important;
}
</style>
